<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax--实现步骤</title>
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
    <h1>Ajax--实现异步请求</h1>
    <button onclick="getMsg()">原生js实现步骤</button>
    <button id="btn">jQUsery实现异步步骤</button>
    <p>结果:<span id="js"></span></p>
    <script>
        function getMsg(){
            //第一步：实例化 XMLHttpRequest
           var  req = new XMLHttpRequest();

           //第二步：初始化HTTP请求参数
            req.open("get","hello.do",true);

            //第三步：发送请求 -- req.send()
            req.send();
            //第四步：设置回调函数 --监听 readyStatus属性
            req.onreadystatechange = function (){
                //req.readyState==4 服务器完成响应
                //req.status == 200 Http响应状态,200表示ok
                if (req.readyState == 4 && req.status==200){
                    //第五:获取服务器响应
                  var msg = req.responseText;
                    console.log(msg);
                    //第六步：
                    document.querySelector("#js").innerText =msg;
                }
            }

        }

        //使用jq实现异步请求
        //注意：在 jq 中，
        $("#btn").click(function(){
            $.ajax("hello.do",{
                type:'get',
                success:function(data){
                    // console.log(data)
                    $("#js").text(data);
                }
            })
        });
    </script>
</body>
</html>